<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>啦啦啦</title>
		<script src="../js/axios.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div align="center">
				<h3 >用户新增</h3>
				姓名:&nbsp;<input type="text" v-model="adduser.name"/>&nbsp;
				年龄:&nbsp;<input type="number" v-model="adduser.age"/>
				性别:<input type="radio" name = "sex" value="男" v-model="adduser.sex"/>男
					   <input type="radio" name = "sex" value="女" v-model="adduser.sex"/>女
					   <button @click="addUser">新增</button>
					   <hr />
					   
			</div>
			<div align="center">
				<h3>用户修改</h3>
				编号:&nbsp;<input type="number" disabled="disabled" v-model="upuserr.id"/>&nbsp;
				姓名:&nbsp;<input type="text" v-model="upuserr.name"/>&nbsp;
				年龄:&nbsp;<input type="number" v-model="upuserr.age"/>&nbsp;
				性别:<input type="radio" name = "sex" value="男" v-model="upuserr.sex"/>男
					   <input type="radio" name = "sex" value="女" v-model="upuserr.sex"/>女
					   <button @click="updateUser">修改</button>
					   <hr />
			</div>
			<table border="2px" width="50%" align="center">
				<tr>
					<th colspan="5"><h2>用户信息列表</h2></th>
				</tr>
				<tr>
					<th width="10%">编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
				<tr v-for="userr in userlist">
					<td width="10%" align="center" v-text="userr.id"></td>
					<td align="center" v-text="userr.name"></td>
					<td align="center" v-text="userr.age"></td>
					<td align="center" v-text="userr.sex"></td>
					<td width="22.5%" align="center">
						<button @click="back(userr)">修改</button>
						<button @click="deleteUser(userr)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		
		<script>
		axios.defaults.baseURL = "http://localhost:8090/user"
			new Vue({
				el : "#app",
				data : {
					userlist :[],
					adduser:{
						name : '',
						age : '',
						sex : ''
					},
					upuserr:{
						id : '',
						name : '',
						age : '',
						sex : ''
					}
				},
				methods:{
					getUserList(){
						axios.get("/getAll").then(
							promise =>{
								this.userlist = promise.data
							}
						)
					},
					deleteUser(userr){
						let y = confirm("是否要删除这条数据")
						if(y == true){
							axios.delete("/deleteUserById?id="+userr.id).then(
								promise =>{
									alert(promise.data)
									this.getUserList()
									this.adduser = {}
								}
						)
						}
						
					},
					addUser(){
						let y = confirm("是否要增加此数据")
						if(y == true){
							axios.post("/addUser",this.adduser).then(
							promise =>{
								alert(promise.data)
								this.getUserList()
								this.adduser = {}
							}
						)
						}else{
							this.adduser = {}
						}
						
					},
					back(userr){
						this.upuserr = JSON.parse(JSON.stringify(userr))
					},
					updateUser(){
							let y = confirm("是否要修改")
							if(y == true){
								axios.put("/updateUser",this.upuserr).then(
									promise =>{
										this.getUserList()
										this.upuserr = {}
										alert(promise.data)
							}
							)
						}	
					}
				},
				created(){
					this.getUserList()
				}
			})
		</script>
	</body>
</html>
